<template>
	<div class="page-container flex <sm:flex-col">
		<div class="md:w-[200px] <sm:mb-[20px] w-full bg-white rounded-[12px] md:mr-[24px] py-[32px] px-[16px]">
			<div
				v-for="(name, index) in list"
				:key="index"
				:style="{
					backgroundColor: index === value ? 'var(--primary-color)' : '',
					color: index === value ? '#fff' : '#2C333F',
					borderColor: index === value ? 'var(--primary-color)' : '#DDE4EE',
					marginBottom: index === list.length - 1 ? 0 : '12px',
				}"
				class="cursor-pointer border-[1px] border-solid w-full h-[48px] rounded-[8px] flex items-center justify-center font-bold text-[12px]"
				@click="$emit('input', index)"
			>
				{{ name }}
			</div>
		</div>
		<div class="md:flex-1 bg-white rounded-[12px] p-[40px]">
			<slot />
		</div>
	</div>
</template>

<script>
export default {
	name: 'Tab',
	props: {
		//选中索引
		value: {
			type: Number,
			default: 0,
		},
		//列表
		list: {
			required: true,
			type: Array,
			default: () => [],
		},
	},
};
</script>

<style scoped></style>
